<template>
  <a-modal class="common-modal" :title="title" :footer="null" :width="560" :visible="visible" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <!-- <a-modal class="common-modal" :title="title" :footer="null" :width="560" :visible="visible" :confirm-loading="confirmLoading" @cancel="handleCancel" :maskClosable="false" style="top:5%;"> -->
    <!-- <a-spin :spinning="confirmLoading"> -->
    <a-form :model="formState" ref="formRef" layout="horizontal" :rules="stationRule" class="common-modal-content" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-form-item label="站角色" :labelCol="labelCol1" :wrapperCol="wrapperCol1" name="role">
        <a-select placeholder="请选择版本" v-model:value="formState.role" disabled>
          <a-select-option v-for="(item, index) in roleColorList" :key="index" :value="item.value">{{item.name}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="辅站" :labelCol="labelCol1" :wrapperCol="wrapperCol1" name="mainStationBoolean">
        <a-switch :placeholder="$t('common.pleaseSelect')" v-model:checked="formState.mainStationBoolean" />
      </a-form-item>
      <a-form-item label="比例" :labelCol="labelCol1" :wrapperCol="wrapperCol1" name="proportion">
        <a-input-number placeholder="请输入比例" v-model:value="formState.proportion" :min="1" />
      </a-form-item>
      <a-form-item label="站类型" :labelCol="labelCol1" :wrapperCol="wrapperCol1" name="type">
        <a-select placeholder="请选择站类型" v-model:value="formState.type">
          <a-select-option v-for="(item, index) in stationTypeList" :key="index" :value="item.value">{{item.name}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="员工" :labelCol="labelCol1" :wrapperCol="wrapperCol1" name="staffId">
        <a-select placeholder="请选择员工" v-model:value="formState.staffId">
          <a-select-option v-for="(item) in staffListArray" :key="item" :value="item.id">{{item.staffNo}}-{{item.nickName}}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="技能等级" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
        <!--         name="bridgeType" -->
        <a-select placeholder="请选择技能等级" v-model:value="formState.staffId" disabled>
          <a-select-option v-for="(item) in staffListArray" :key="item" :value="item.id">{{item.skillGrade}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="工种名称" :labelCol="labelCol" :wrapperCol="wrapperCol1">
        <a-select v-model:value="formState.staffId" disabled>
          <a-select-option v-for="(item) in staffListArray" :key="item" :value="item.id"> {{arrToStr(item.professionNameList)}} </a-select-option>
        </a-select>
      </a-form-item>

      <div v-show="showMore">
        <a-form-item label="指定颜色" name="colorList">
          <a-select :placeholder="$t('common.pleaseSelect')" v-model:value="formState.colorList" mode="multiple">
            <a-select-option v-for="(item, index) in colorOption" :key="index" :value="item">{{item}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="指定尺码" name="sizeList">
          <a-select :placeholder="$t('common.pleaseSelect')" v-model:value="formState.sizeList" mode="multiple">
            <a-select-option v-for="(item, index) in sizeOption" :key="index" :value="item">{{item}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="指定PO" name="poList">
          <a-select :placeholder="$t('common.pleaseSelect')" v-model:value="formState.poList" mode="multiple">
            <a-select-option v-for="(item, index) in poOption" :key="index" :value="item">{{item}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="指定床号" name="cutterNoList">
          <a-select :placeholder="$t('common.pleaseSelect')" v-model:value="formState.cutterNoList" mode="multiple">
            <a-select-option v-for="(item, index) in cutterNoOption" :key="index" :value="item">{{item}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="指定裁剪单" name="tailorBillList">
          <a-select :placeholder="$t('common.pleaseSelect')" v-model:value="formState.tailorBillList" mode="multiple">
            <a-select-option v-for="(item, index) in tailorBillOption" :key="index" :value="item">{{item}}</a-select-option>
          </a-select>
        </a-form-item>
      </div>

    </a-form>
    <div class="common-modal-footer1">
      <div>
        <a-checkbox v-model:checked="showMore">{{ $t('other.moreAssign') }}</a-checkbox>
      </div>
      <div>
        <a-button @click="handleCancel" class="cancel">{{ $t('common.cancel') }}</a-button>
        <a-button @click="handleOk" type="primary" class="confirm">{{ $t('common.ok') }}</a-button>
      </div>
    </div>
    <!-- </a-spin> -->
  </a-modal>
</template>

<script setup name="commonModal">
import { nextTick, ref } from 'vue'
import { cloneDeep } from 'lodash'
import { stationTypeList, stationRule } from './routeChartConfig'
import { roleColorList } from '@/views/hangManage/prodTimeInfo/modules/prodTimeConfig'
const emits = defineEmits(['ok'])
const labelCol = { span: 5 }
const wrapperCol = { span: 15 }
const labelCol1 = { span: 5 }
const wrapperCol1 = { span: 8 }
let title = ref('')
let visible = ref(false)
let poOption = ref([])
let colorOption = ref([])
let sizeOption = ref([])
let cutterNoOption = ref([])
let tailorBillOption = ref([])
let confirmLoading = ref(false)
let recordInfo = ref({})
let formState = ref({})
let staffListArray = ref([])
const formRef = ref()
let showMore = ref(false)
// let evnConfig = process.env.VUE_APP_CONFIG

const arrToStr = (arr) => {
  return arr ? arr.join(",") : ''
}

const initOptions = (info) => {
  let { poList, colorList, sizeList, cutterNoList, tailorBillList } = info
  poOption.value = poList || []
  colorOption.value = colorList || []
  sizeOption.value = sizeList || []
  cutterNoOption.value = cutterNoList || []
  tailorBillOption.value = tailorBillList || []
}
const initFormData = (record) => {
  recordInfo.value = Object.assign({}, record);
  ['colorList', 'sizeList', 'poList', 'cutterNoList', 'tailorBillList'].forEach(i => {
    recordInfo.value[i] = recordInfo.value[i] || undefined
  })
}
const edit = async (name, record, info, staffList) => {
  title.value = `站点编辑（${name}）`
  initOptions(info)
  initFormData(record)
  // console.log(staffList,'-----------------------')
  staffListArray.value = staffList
  visible.value = true
  await nextTick()
  formState.value = cloneDeep(recordInfo.value)
  formRef.value.resetFields()
}
const handleOk = async () => {
  try {
    const values = await formRef.value.validateFields()
    let params = { ...values }
    params.stationId = recordInfo.value.stationId
    emits('ok', params)
    visible.value = false
  } catch (err) {
    console.log('0000000', err)
  }
}
const handleCancel = () => {
  visible.value = false
  confirmLoading.value = false
  formState.value = {}
  formRef.value.resetFields()
}



defineExpose({
  edit
})
</script>
